<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
  <head>
    <title>Flash-VideoIO | Flash-based audio and video communication</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="shortcut icon" href="http://myprojectguide.org/sites/default/files/garland_favicon.ico" type="image/x-icon" />
    <link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/modules/book/book.css?w" />
<link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/modules/node/node.css?w" />
<link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/modules/system/defaults.css?w" />
<link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/modules/system/system.css?w" />

<link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/modules/system/system-menus.css?w" />
<link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/modules/user/user.css?w" />
<link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/modules/forum/forum.css?w" />
<link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/sites/default/files/color/garland-a725207e/style.css?w" />
<link type="text/css" rel="stylesheet" media="print" href="http://myprojectguide.org/themes/garland/print.css?w" />
        <!--[if lt IE 7]>
      <link type="text/css" rel="stylesheet" media="all" href="http://myprojectguide.org/themes/garland/fix-ie.css" />    <![endif]-->

<style type="text/css">
pre { color: #606060; font-size: small; line-height: 1; }
pre.code { margin-left: 40px; margin-right: 40px; border: 1px dotted grey; padding: 4px 4px 4px 4px; color: #606060; }
b { color: #000000; }
ol { line-height: 1; }
div.info {margin-left: 40px; margin-right: 40px; border: 1px solid grey; padding: 4px 4px 4px 4px;}
p { text-align: justify; }
</style>

<script type="text/javascript">
function getFlashMovie(movieName) {
    var isIE = navigator.appName.indexOf("Microsoft") != -1;
    return (isIE) ? window[movieName] : document[movieName];  
}
</script>


  </head>
  <body class="sidebar-right">

<!-- Layout -->
  <div id="header-region" class="clear-block"></div>

    <div id="wrapper">

    <div id="container" class="clear-block">

      <div id="header">
        <div id="logo-floater">
        <h1><a href="index.html" title="Flash-VideoIO - Flash-based audio and video communication"><img src="http://myprojectguide.org/sites/default/files/garland_logo.png" alt="Gurukul My Project Guide" id="logo" /><span>VideoIO</span> Flash-based audio and video communication</a></h1>
        </div>

                                                    
      </div> <!-- /header -->

      
      <div id="center"><div id="squeeze"><div class="right-corner"><div class="left-corner">

<div class="breadcrumb"><a href="/">Home</a> › <a href="index.html">Flash-VideoIO Tutorial</a></div>

<div id="node-1" class="node">


  
  <div class="content clear-block">

<h2>How to do two-party video call?</h2>
  
<p>You can do live video call by having two instances of VideoIO application, one capturing live camera view and microphone audio as local stream to the media server, and other playing the video and audio of the remote stream from the media server. Please see <a href="3.html">How to work with media server?</a> on details of installing and configuring a media server. For illustrations in this section we assume that you have a media server running on <tt>192.1.2.3</tt> and that has an application called <tt>myapp</tt> which allows you to do live media stream. Thus, your media server application should be reachable at "rtmp://192.1.2.3/myapp". In real deployment you will use the real host name or IP address of your media server.</p>

<p>The <tt>src</tt> property of the VideoIO application can be set to enable the local (publish) or remote (play) mode. If two users, Alice and Bob are in a call, Alice can publish to stream named "alice" and play stream named "bob", and vice-versa for Bob. Thus the remaining challenge is to convey the desired stream name from one user to another in a call. In practice, people use variety of methods ranging from CGI web service, JavaScript or Jabber service to exchange such information. Whatever mechanism you decide will become the call initiation service of your system. In our tutorial we will assume that these information is exchanged out-of-band by the individuals, e.g., over instant messenging or email.</p>

<center>
<table style="width: 200px;">
<tr><th>stream</th><th>Alice</th><th>Bob</th></tr>
<tr><td>publish/local</td><td>alice</td><td>bob</td></tr>
<tr><td>play/remote</td><td>bob</td><td>alice</td></tr>
</table>
</center>

<p>The user interface will typically have two VideoIO instances - one for local video and other for remote video. The caller, Alice, picks a stream name, alice, and sets the <tt>src</tt> URL of local instance to "rtmp://192.1.2.3/myapp?publish=alice". <i>Do not explicitly set live=true because it is implicitly set when publishing</i>. As part of the call initiation process, Alice sends the local <tt>src</tt> URL to callee, Bob. If Bob wants to accept the video call, he replaces <tt>publish</tt> with <tt>play</tt> and sets the <tt>src</tt> URL of remote instance on his side to "rtmp://192.1.2.3/myapp?play=alice". Bob also picks a stream name, bob, sets the <tt>src</tt> URL of local instance on his side to "rtmp://192.1.2.3/myapp?publish=bob", and responds to Alice with this local <tt>src</tt> URL. When Alice receives Bob's local <tt>src</tt> URL, she replaced <tt>publish</tt> with <tt>play</tt> and sets the remote <tt>src</tt> URL on her side. Now both sides are publishing to their local stream and playing from the remote ends stream in the two-party call. Terminating the call is as simple as setting local and remote <tt>src</tt> URLs to null or "".</p>

<div class="info">
<b>Information</b>: Typically a media server allows any number of play instances for a stream name, but only one publish instance within a URL scope. Hence, the stream name must be chosen carefully to avoid conflict with other users for the call or conference or with existing recorded files. For example, if you have already published earlier with publish=file1&amp;record=true then the server has file1.flv, so using the play=file1 will play from this recorded file instead of live user stream.
</div>

<p>The following user interface embeds two VideoIO instances. The left one is for local video and right one for remote video. To try the demonstration, open this page in two browser instances. You can try on two different machines or the same machine. On first keep your default publish stream name as "alice" and play as "bob". On second swap the stream name so that publis is "bob" and play is "alice". Then click on the two <tt>set</tt> buttons on both the browser instances to start your call between the two. If you are running media server on a different host than 192.1.2.3, change the URL's IP address in all text input boxes. </p>

<script>
function getFlashMovie(movieName) {
    var isIE = navigator.appName.indexOf("Microsoft") != -1;
    return (isIE) ? window[movieName] : document[movieName];  
}
</script>

<table style="width: 640px;"><tr valign="top">
<td>
<object type="application/x-shockwave-flash" data="VideoIO.swf"
    id="video1" width="320" height="240">
    <param name="movie" value="VideoIO.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#000000" />
    <param name="allowFullScreen" value="true" />
    <param name="allowScriptAccess" value="always" />
    <param name="flashVars" value="controls=true" />
</object>
<center>
<input id="src1" type="text" autocomplete="off" style="width:170px;"
    value="rtmp://192.1.2.3/myapp"/>
?publish=
<input id="publish1" type="text" autocomplete="off" style="width:50px;"
    value="alice"/>
<br/>
<input value="set" type="button" 
    onclick="getFlashMovie('video1').setProperty('src', 
        document.getElementById('src1').value
        + '?publish=' + document.getElementById('publish1').value)"/>
<input value="reset" type="button" 
    onclick="getFlashMovie('video1').setProperty('src', null)"/>
</center>
</td>
<td>
<object type="application/x-shockwave-flash" data="VideoIO.swf"
    id="video2" width="320" height="240">
    <param name="movie" value="VideoIO.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#000000" />
    <param name="allowFullScreen" value="true" />
    <param name="allowScriptAccess" value="always" />
    <param name="flashVars" value="controls=true" />
</object>
<center>
<input id="src2" type="text" autocomplete="off" style="width:170px;"
    value="rtmp://192.1.2.3/myapp"/>
?play=
<input id="play2" type="text" autocomplete="off" style="width:50px;"
    value="bob"/>
<br/>
<input value="set" type="button" 
    onclick="getFlashMovie('video2').setProperty('src', 
        document.getElementById('src2').value
        + '?play=' + document.getElementById('play2').value)"/>
<input value="reset" type="button" 
    onclick="getFlashMovie('video2').setProperty('src', null)"/>
</center>

</td></tr></table>

<p>The source code for these are similar to earlier examples. You can also right-click and select "View Page Source" or equivalent menu option to see the source code.</p>

<h2>Summary</h2>

<p>In summary, you can use the <tt>src</tt> property with URL parameter containing <tt>publish</tt> for your stream and <tt>play</tt> for remote stream. The <tt>recording</tt> and <tt>playing</tt> properties control the current state of whether your video is transmitted or whether remote video is played.</p>

<p>This tutorial is just the begining of how to do two-party video call. The VideoIO API is so simple that just setting the <tt>src</tt> property allows you to accomplish several use cases. There are several other properties that affect behavior of a call, e.g., you can control the camera quality or sound mute. Additionally, you can build other advanced user interface controls in JavaScript similar to how VideoIO's control panel shows in Flash.</p>

<p>The video displayed in local and remote video are different. The publish mode displays the live camera view. In VideoIO the live camera view is always flipped horizontally to appear as if you are looking in a mirror, whereas the actual media stream sent to the server for recording or re-distribution appears as if the camera is looking at you. We feel that this gives the most natural behavior for live video chat or message recording.</p>

</div>
          </div>

          <div id="footer">&copy; 2010-2011, Kundan Singh, All Rights Reserved.</div>
          
      </div></div></div></div> <!-- /.left-corner, /.right-corner, /#squeeze, /#center -->

              <div id="sidebar-right" class="sidebar">

<div id="block-forum-0" class="clear-block block block-forum">

  <h2>In This Project</h2>

  <div class="content"><div class="item-list">
<ul><li class="first"><a href="index.html">Project Home</a></li>
</ul>
<ol>
<li class="last"><a href="1.html">Embedding</a></li>
<li class="last"><a href="2.html">Live camera view</a></li>
<li class="last"><a href="3.html">Media server</a></li>
<li class="last"><a href="4.html">Record a message</a></li>
<li class="last"><a href="5.html">Play video file</a></li>
<li class="last"><a href="6.html">Two-party call</a></li>
<li class="last"><a href="7.html">Video broadcast</a></li>
<li class="last"><a href="8.html">Multi-party conference</a></li>
<li class="last"><a href="9.html">P2P video call</a></li>
<li class="last"><a href="10.html">VideoIO API</a></li>
<li class="last"><a href="11.html">SIP/VoIP call</a></li>
</ol></div></div>
</div>

<div id="block-forum-1" class="clear-block block block-forum">

  <h2>References</h2>

  <div class="content"><div class="item-list"><ul><li class="first"><a href="http://myprojectguide.org">Gurukul - Student Project Guide</a></li>
<li class="last"><a href="http://code.google.com/p/videocity">Videocity - web video telephony and conference</a></li>
<li class="last"><a href="http://code.google.com/p/rtmplite">rtmplite - lightweight Flash media (RTMP) server in Python</a></li>
<li class="last"><a href="http://myprojectguide.org/node/6">Project Ideas on Multimedia Networking</a></li>
</ul></div></div>
</div>

              </div>

    </div> <!-- /container -->
  </div>
    </body>
</html>
